<template>
  <div id="complaints">
    <top-bar :title="title"></top-bar>
    <div class="complaints_bg">
      <div class="orderinformation_box">
        <ul class="orderinformation_list">
          <li>
            <md-icon name="snkc_xcqx_time" slot="left" class="snkc_xcqx_time"></md-icon>
            <span>{{getTime}}</span>
          </li>
          <li>
            <md-icon name="shangchedian" slot="left" class="shangchedian"></md-icon>
            <span>{{getOrderInfoData?getOrderInfoData.start_route:''}} {{getOrderInfoData?getOrderInfoData.origin:''}}</span>
          </li>
          <li>
            <md-icon name="xiachedian" slot="left" class="shangchedian"></md-icon>
            <span>{{getOrderInfoData?getOrderInfoData.end_route:''}} {{getOrderInfoData?getOrderInfoData.destination:''}}</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="complaints_text">
      <p class="complaints_hd">
        <md-icon name="snkc-scnr" slot="left" class="snkc-scnr"></md-icon>
        <span class="complaints_hd_text">投诉内容</span>
        <span class="complaints_hd_right">{{cPCreateTime}}</span>
      </p>
      <p class="complaints_ct">{{complaintContent}}</p>
    </div>
    <div class="complaints_text">
      <p class="complaints_hd">
        <md-icon name="snkc_ssjg" slot="left" class="snkc-scnr"></md-icon>
        <span class="complaints_hd_text">投诉处理结果</span>
        <span class="complaints_hd_right processingative" v-if="complaintsdealStatus">
          <md-icon name="snkc_xcqx_time" slot="left" class="processing_time"></md-icon>处理中
        </span>
        <span class="complaints_hd_right endprocessing" v-else>
          <md-icon name="snkc_xcqx_time" slot="left" class="processing_time"></md-icon>已处理
        </span>
      </p>
      <p class="complaints_ct">{{processingresult}}</p>
    </div>
  </div>
</template>
<script>
import '@/assets/svgs/shangchedian.svg';
import '@/assets/svgs/xiachedian.svg';
import '@/assets/svgs/snkc_xcqx_time.svg';
import '@/assets/svgs/snkc-scnr.svg';
import '@/assets/svgs/snkc_ssjg.svg';
import { Tabs, Icon, Field, InputItem, Toast, Dialog } from 'mand-mobile';
import TopBar from '@/components/TopBar';
import Loading from '@/components/loading';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import { mapGetters, mapActions, mapMutations } from 'vuex';
import http from '@/common/http';
var CryptoJS = require('crypto-js');
var moment = require('moment');
moment.locale('zh-cn');
export default {
  components: {
    [Tabs.name]: Tabs,
    [Icon.name]: Icon,
    [TopBar.name]: TopBar,
    [Field.name]: Field,
    [Toast.name]: Toast,
    [Dialog.name]: Dialog,
    [InputItem.name]: InputItem
  },
  data() {
    return {
      title: '查看投诉',
      complaintContent: '',
      cPCreateTime: '',
      complaintsdealStatus: true,
      processingresult: ''
    };
  },
  mounted() {
    // 获取订单详情
    if (this.$route.query.orderno) {
      this.getOrderInfo(this.$route.query.orderno).then(() => {});
    } else {
      Dialog.alert({
        title: '提示',
        content: '获取不到订单号',
        confirmText: '确定'
      });
    }
    // 获取投诉信息
    var data = {
      order_no: this.$route.query.orderno
    };
    Loading.show();
    http.post('pakj/order/getComplaintDeal', data).then(res => {
      Loading.hide();
      if (res.data.code === '000000') {
        console.log(res.data);
        this.complaintContent = res.data.data.complaintContent;
        this.cPCreateTime = res.data.data.cPCreateTime;
        if (res.data.data.dealStatus === '0') {
          // 未处理
          this.complaintsdealStatus = true;
          this.processingresult = '平台正在处理您的投诉，请随时关注查询结果！';
        } else {
          // 已处理
          this.complaintsdealStatus = false;
          this.processingresult = '已处理';
        }
      } else {
        Dialog.alert({
          title: '提示',
          content: res.data.msg,
          confirmText: '确定'
        });
      }
    });
  },
  methods: {
    ...mapActions(['getOrderInfo'])
  },
  computed: {
    ...mapGetters(['getOrderInfoData']),
    getTime() {
      var str = this.getOrderInfoData;
      var startMoment = '';
      if (!str) {
        return '';
      }
      let momstart = moment(str.travel_time, 'x');
      startMoment = momstart.calendar(null, {
        sameDay: '[今天] HH:mm',
        nextDay: '[明天] HH:mm',
        nextWeek: 'dddd HH:mm',
        lastDay: '[昨天] HH:mm',
        lastWeek: '[上] ddd HH:mm',
        sameElse: 'MMMDo HH:mm'
      });
      return startMoment;
    }
  }
};
</script>
<style lang="stylus" scoped>
p {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

#complaints {
  height: 100vh;
  background-color: color-primary-background;
}

.complaints_bg {
  background-color: #fff;
}

.snkc_xcqx_time {
  width: 16px;
  height: 16px;
  margin-right: 10px;
}

.shangchedian {
  width: 16px;
  height: 16px;
  margin-right: 10px;
}

.snkc-scnr {
  width: 22px;
  height: 22px;
}

.processing_time {
  width: 24px;
  height: 24px;
  position: relative;
  top: 5px;
  right: 8px;
}

.orderinformation_box {
  margin-top: 20px;
}

.orderinformation_list {
  padding-top: 20px;
  padding-bottom: 20px;
}

.orderinformation_list li {
  margin: 0px 30px;
  font-size: 24px;
  color: #666;
  margin-top: 10px;
}

.complaints_input {
  background-color: #fff;
  margin-top: 20px;
  padding: 20px 30px;
}

.complaints_input textarea {
  border: none;
  resize: none;
  width: 100%;
  height: 160px;
}

.complaints_bottom {
  position: fixed;
  width: 100%;
  bottom: 20px;
}

.complaints_bottom p {
  background-color: #FF6917;
  margin: 0px 20px;
  height: 98px;
  line-height: 98px;
  font-size: 36px;
  color: #fff;
  text-align: center;
  border-radius: 10px;
}

.complaints_text {
  margin-top: 20px;
  background-color: #fff;
}

.complaints_hd {
  height: 80px;
  line-height: 80px;
  padding: 0px 30px;
  border-bottom: solid 1px #E0E0E0;
}

.complaints_hd_text {
  font-size: 28px;
  color: #333;
  margin-left: 8px;
}

.complaints_hd_right {
  float: right;
  font-size: 24px;
  color: #666;
}

.complaints_ct {
  padding: 40px 30px;
  font-size: 26px;
  color: #666;
}

.complaints_hd_right.processingative {
  color: #3CB371;
}

.complaints_hd_right.endprocessing {
  color: #FF6917;
}
</style>
